<template>
  <div class="map-dashboard">
    <el-card class="map-card" :style="{ height: fixedHeight ? fixedHeight : 'calc(63vh - 120px)' }">
<!--      <template #header>-->
<!--        <div class="card-header">-->
<!--          <span>全国岗位与报名分布图</span>-->
<!--          <el-button style="float: right; padding: 3px 0" type="text" @click="refreshData">刷新数据</el-button>-->
<!--        </div>-->
<!--      </template>-->
      <china-map :job-data="jobData" :apply-data="applyData" />
    </el-card>
  </div>
</template>

<script>
import ChinaMap from './ChinaMap.vue'
import { listAvailable } from "@/api/system/available";
import { listApply } from "@/api/system/apply";

export default {
  name: 'MapDashboard',
  components: {
    ChinaMap
  },
  props: {
    fixedHeight: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      jobData: [],
      applyData: []
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    async loadData() {
      try {
        // 获取岗位数据，设置pageSize为一个足够大的数以获取所有数据
        const jobResponse = await listAvailable({
          pageSize: 10000,
          pageNum: 1
        });
        this.jobData = jobResponse.rows || [];
        console.log("jobdata" , this.jobData)

        // 获取报名数据，设置pageSize为一个足够大的数以获取所有数据
        const applyResponse = await listApply({
          pageSize: 10000,
          pageNum: 1
        });
        this.applyData = applyResponse.rows || [];
        console.log("applydata" , this.applyData)
      } catch (error) {
        console.error('数据加载失败:', error);
        this.$message.error('数据加载失败');
      }
    },
    async loadDataByPagination() {
      try {
        // 另一种方式：通过分页获取所有岗位数据
        let jobData = [];
        let pageNum = 1;
        const pageSize = 100;
        let hasMore = true;

        while (hasMore) {
          const jobResponse = await listAvailable({
            pageSize: pageSize,
            pageNum: pageNum
          });

          jobData = jobData.concat(jobResponse.rows || []);

          // 判断是否还有更多数据
          if (!jobResponse.rows || jobResponse.rows.length < pageSize) {
            hasMore = false;
          } else {
            pageNum++;
          }
        }

        this.jobData = jobData;

        // 通过分页获取所有报名数据
        let applyData = [];
        pageNum = 1;
        hasMore = true;

        while (hasMore) {
          const applyResponse = await listApply({
            pageSize: pageSize,
            pageNum: pageNum
          });

          applyData = applyData.concat(applyResponse.rows || []);

          // 判断是否还有更多数据
          if (!applyResponse.rows || applyResponse.rows.length < pageSize) {
            hasMore = false;
          } else {
            pageNum++;
          }
        }

        this.applyData = applyData;
      } catch (error) {
        console.error('数据加载失败:', error);
        this.$message.error('数据加载失败');
      }
    },
    refreshData() {
      this.loadData();
      this.$message.success('数据已刷新');
    }
  }
}
</script>

<style scoped>
.map-dashboard {
  //padding: 20px;
  background-color: #ffffff;
  min-height: calc(50vh - 84px);
}

.map-card {
  height: calc(50vh - 120px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
